<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	   	<title></title>
	    <link href="/static/weike/css/style.css" rel="stylesheet">
	    <script src="/static/weike/js/style.js"></script>
	    <script src="/static/js/jquery.js"></script>
      <script src="/static/weike/js/pic_deal.js"></script>
	    <script src="/static/lrz/dist/lrz.bundle.js"></script>
	</head> 
	<body class="wk_img_change weike_img_lunbo">
		<header>
		</header>
		<input type="checkbox" class="change" />
		<span></span>
		<article class="article" id="article">
			<div class="input_file">
			</div>
		</article>
		<aside>
			
		</aside>
		<div class="div">
			<button onclick="javascript:window.location.href='http://mg.bonayiyou.com/index/home/class_pay.html?room_id={$RoomId}'">取消编辑</button>
			<button onclick="" class="sure">确认编辑</button>
		</div>
		<input type="hidden" value="{$count}" class="img_length" /><!--此处value为传回图片的数目-->
		<script>
			var _section="",
				input_file = document.getElementsByClassName(" input_file ")[0],
				_length = 20;//自定义张数
			var count="{$count}";
			var url="";
			for( var _i = 0 ;_i < _length ;_i++){
               if(--count>=0)
               {
               if(count==1)
               {
               url="{$lunbo['1']['img_cover']}";
               }
               else if(count==0)
               {
               url="{$lunbo['0']['img_cover']}";	
               }
               else if(count==2)
               {	
               url="{$lunbo['2']['img_cover']}";
               }
               else if(count==3)
               {	
               url="{$lunbo['3']['img_cover']}";
               }
               else if(count==4)
               {	
               url="{$lunbo['4']['img_cover']}";
               }
               else if(count==5)
               {	
               url="{$lunbo['5']['img_cover']}";
               }
               else if(count==6)
               {	
               url="{$lunbo['6']['img_cover']}";
               }
               else if(count==7)
               {	
               url="{$lunbo['7']['img_cover']}";
               }
               else if(count==8)
               {	
               url="{$lunbo['8']['img_cover']}";
               }
               else if(count==9)
               {	
               url="{$lunbo['9']['img_cover']}";
               }
               else if(count==10)
               {	
               url="{$lunbo['10']['img_cover']}";
               }
               else if(count==11)
               {	
               url="{$lunbo['11']['img_cover']}";
               }
               else if(count==12)
               {	
               url="{$lunbo['12']['img_cover']}";
               }
               else if(count==13)
               {	
               url="{$lunbo['13']['img_cover']}";
               }
               else if(count==14)
               {	
               url="{$lunbo['14']['img_cover']}";
               }
               else if(count==15)
               {	
               url="{$lunbo['15']['img_cover']}";
               }
               else if(count==16)
               {	
               url="{$lunbo['16']['img_cover']}";
               }
               else if(count==17)
               {	
               url="{$lunbo['17']['img_cover']}";
               }
               else if(count==18)
               {	
               url="{$lunbo['18']['img_cover']}";
               }
               else if(count==19)
               {	
               url="{$lunbo['19']['img_cover']}";
               }
               else
               {

               }
               _section += '<section>'+
							'<input type="file" name="'+_i+'" accept="image/*" class="_input" />'+
							'<input type="hidden" value="'+url+'" class="php_trans" />'+
							'<canvas class="input_canvas"></canvas>'+
							'<img src="'+url+'" class="press" />'+
							'<div></div>'+
							'<div class="ben_close" onclick="img_change(this)"><span></span</div>'+
							'</section>';
               }
               else
               {
               	_section += '<section>'+
							'<input type="file" name="'+_i+'" accept="image/*" class="_input" />'+
							'<input type="hidden" value="" class="php_trans" />'+
							'<canvas class="input_canvas"></canvas>'+
							'<img src="" class="press" />'+
							'<div></div>'+
							'<div class="ben_close" onclick="img_change(this)"><span></span</div>'+
							'</section>';
               }	
			}
				input_file.innerHTML = _section;
		
			//获取img长度控制section展示
			(function(){
				var m = document.getElementsByClassName("img_length")[0].value,
					input_file = document.getElementsByClassName(" input_file ")[0],
					sec =  input_file.getElementsByTagName("section");
					for( var i = 0;i<m;i++){
						sec[i].classList.add("show","true");
					}
					if(m<_length){
						sec[m].classList.add("show");
					}
			})()
		</script>
		<script>
		//移动端上传图片
       $("input[type=file]").change(function () {
    	var next_input=$(this).next();
      var next_img=$(this).next().next().next();
      var sourceSize = (this.files[0].size / 1024);
      console.log(sourceSize);
      if(sourceSize<300)
      {
        /* 压缩图片 */
        lrz(this.files[0], {
            quality:1
            //width: 750 //设置压缩参数
        }).then(function (rst) {
            /* 处理成功后执行 */
            rst.formData.append('base64img', rst.base64); // 添加额外参数
            $.ajax({
                url: "/index/home/post_img",
                type: "POST",
                data: rst.formData,
                processData: false,
                contentType: false,
                success: function (data) {
                   next_input.attr('value',data);
                   next_img.attr('src',data);
                }
            });
        }).catch(function (err) {
            /* 处理失败后执行 */
        }).always(function () {
            /* 必然执行 */
        })
      }
      else
      {
         /* 压缩图片 */
        lrz(this.files[0], {
            //quality:1
            //width: 750 //设置压缩参数
        }).then(function (rst) {
            /* 处理成功后执行 */
            rst.formData.append('base64img', rst.base64); // 添加额外参数
            $.ajax({
                url: "/index/home/post_img",
                type: "POST",
                data: rst.formData,
                processData: false,
                contentType: false,
                success: function (data) {
                   next_input.attr('value',data);
                   next_img.attr('src',data);
                }
            });
        }).catch(function (err) {
            /* 处理失败后执行 */
        }).always(function () {
            /* 必然执行 */
        })
      }

    })	
			var art = document.getElementsByTagName("article")[0],
				inp = art.getElementsByClassName("_input"),
				num = inp.length;
				close =  art.getElementsByClassName("ben_close");
				function img_change(_this){
					var m =_this.parentNode;
						m.getElementsByTagName("img")[0].src = "";//此处地址为原始地址
					var tru = art.getElementsByClassName("true");
						if(tru.length >= num ){
							m.classList.remove("true");
						}else{
							m.classList.remove("true","show");
						}
						m.parentNode.appendChild(m);
						resetname();
				}
				function resetname(){
					for(var i =0;i<close.length;i++){
						inp[i].setAttribute("name",String(i));
					}
				}
			var php_sure = document.getElementsByClassName("sure")[0];
				on(php_sure,"click",function(){
					var php_trans = document.getElementsByClassName("php_trans"),
						str = [],str_child = [];
						for(var i =0;i<php_trans.length;i++){
							str_child = [php_trans[i].value];
							str.push(str_child);
						}
					var str_trans = JSON.stringify(str);//str_trans就是与后台传输的值
					var url="http://mg.bonayiyou.com/index/home/weike_img_lunbo?room_id={$RoomId}";
					$.post(url,{data:str_trans},function(e){
				    //编辑轮播图成功后调到直播间页面
                    if(e.code==1)
                    {
                    window.location.href="http://mg.bonayiyou.com/index/home/person_zhibo.html";
                    }
					},"JSON");
					console.log(str_trans)
				})
		</script>
	</body>
</html>
